<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>纯css实现点亮星星效果</title>
	<style>
		/* 星星点灯照亮我的家门 */
		.star_bg {
		    width: 120px; height: 20px;
		    background: url(./img/star.png) repeat-x;
		    position: relative;
		    overflow: hidden;
		}
		.star {
		    height: 100%; width: 24px;
		    line-height: 6em;
		    position: absolute;
		    z-index: 3;
		}
		.star:hover {    
		    background: url(./img/star.png) repeat-x 0 -20px!important;
		    left: 0; z-index: 2;
		}
		.star_1 { left: 0; }
		.star_2 { left: 24px; }
		.star_3 { left: 48px; }
		.star_4 { left: 72px; }
		.star_5 { left: 96px; }
		.star_1:hover { width: 24px; }
		.star_2:hover { width: 48px; }
		.star_3:hover { width: 72px; }
		.star_4:hover { width: 96px; }
		.star_5:hover { width: 120px; }

		label { 
		    display: block; _display:inline;
		    height: 100%; width: 100%;
		    cursor: pointer;
		}

		/* 幕后的英雄，单选按钮 */
		.score { position: absolute; clip: rect(0 0 0 0); }
		.score:checked + .star {    
		    background: url(star.png) repeat-x 0 -20px;
		    left: 0; z-index: 1;
		}
		.score_1:checked ~ .star_1 { width: 24px; }
		.score_2:checked ~ .star_2 { width: 48px; }
		.score_3:checked ~ .star_3 { width: 72px; }
		.score_4:checked ~ .star_4 { width: 96px; }
		.score_5:checked ~ .star_5 { width: 120px; }

		.star_bg:hover .star {  background-image: none; }

		/* for IE6-IE8 JS 交互 */
		.star_checked {    
		    background: url(./img/star.png) repeat-x 0 -20px;
		    left: 0; z-index: 1;
		}
	</style>
</head>
<body>
	<div id="starBg" class="star_bg">                    	
	    <input type="radio" id="starScore1" class="score score_1" value="1" name="score">
	    <a href="#starScore1" class="star star_1" title="差"><label for="starScore1">差</label></a>
	    <input type="radio" id="starScore2" class="score score_2" value="2" name="score">
	    <a href="#starScore2" class="star star_2" title="较差"><label for="starScore2">较差</label></a>
	    <input type="radio" id="starScore3" class="score score_3" value="3" name="score">
	    <a href="#starScore3" class="star star_3" title="普通"><label for="starScore3">普通</label></a>
	    <input type="radio" id="starScore4" class="score score_4" value="4" name="score">
	    <a href="#starScore4" class="star star_4" title="较好"><label for="starScore4">较好</label></a>
	    <input type="radio" id="starScore5" class="score score_5" value="5" name="score">
	    <a href="#5" class="star star_5" title="好"><label for="starScore5">好</label></a>
	</div>
</body>
</html>